<template>
    <div class="hj-table">
        <!-- 查询条件form区域 -->
        <table-search v-if="searchList.length > 0" :searchList="searchList" :searchModel="searchModel" :searchOpeartors="searchOpeartors" @onSubmit="doSearch">
            <!-- 方法1：可以通过给配置searchList -->
            <!-- 方法2：或者使用插槽的方式 -->
            <!-- <template #searchContent>
            </template> -->
        </table-search>
        <div class="table-opeartions" v-if="hasTableOpt">
            <!-- 对表格的批量操作可使用插槽的形式 ,名字：batch-operation，参数selectedData（表格选中行）-->
            <slot name="batchOperation" :selectedData="selectedData"></slot>
        <!-- <slot name="optSlot"></slot> -->
        </div>
        <div class="table-wrapper" ref="tableWrapper">
            <el-table
                :data="tableData" style="width:100%" :max-height="tableMaxHeight" :highlight-current-row="selectable === 'signal'"
                 @selection-change="changeSelect" @row-click="clickRow">    
                <!-- 多选 -->
                <el-table-column  v-if="selectable === 'multiple'"
                    type="selection"
                    width="50"
                    >      
                </el-table-column>   
                <el-table-column v-for="item,index in tableColumn"
                    :key="index.prop" 
                    :prop="item.prop" 
                    :label="item.label" 
                    :width="item.width "
                    :show-overflow-tooltip="true" :resizable="true"
                    :sortable="item.sortable"
                    :align="item.align"
                    >     
                    <!-- 自定义列，插槽名称就是列明 -->
                    <template v-if="item.slot" v-slot:default="scope">
                        <slot :name="item.prop" :row="scope.row" :index="scope.$index"></slot>
                    </template>   
                    <template v-else-if v-slot:default="scope">
                        <!-- 格式化 -->
                        <div v-if="item.format">
                            {{ item.format(scope.row) }}
                        </div> 
                        <!-- 过滤器 -->
                        <!-- <div v-else-if="item.filter">
                            {{ item.prop | filters[item.prop] }}
                        </div> --> 
                        <template v-if="isEdit && item.editable && selectId == scope.row['id']">
                            <el-input v-model="editModel[item.prop]"></el-input>
                        </template>
                        <div v-else>
                            {{ scope.row[item.prop] }}
                        </div>
                    </template>
                    

                </el-table-column>
                <!-- 操作列 -->
                <el-table-column v-if="setupConfig.width !== 0"
                                :width="setupConfig.width"
                                label="操作">
                    <template v-slot:default="scope">
                    <!-- <slot name="setup"
                        
                            :row="scope.row"
                            :index="scope.$index"></slot> -->
                    <!-- 查看 -->
                    <el-button v-if="setupConfig.view" 
                                type="text" size="small"
                                @click="setupEvents('view', scope.row)">查看</el-button>
                    <!-- 保存 -->
                    <el-button v-if="isEdit && selectId == scope.row['id']" size="small" type="success">保存</el-button>
                    <!-- 编辑 -->
                    <el-button v-if="setupConfig.edit"
                                type="warning" size="small"
                                @click="setupEvents('edit', scope.row)">编辑</el-button>
                    <!-- 删除 -->
                    <el-button v-if="setupConfig.delete"
                                type="danger" size="small"
                                @click="setupEvents('delete', scope.row)">删除</el-button>
                    <!-- 操作日志 -->
                    <!-- <el-button v-if="setupConfig.log"
                                type="text"
                                @click="setupEvents('log', scope.row)">操作日志</el-button> -->
                    </template>
                    
                </el-table-column>
            </el-table>
        </div>
        <el-pagination v-if="hasPagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            @prev-click="getData"
            @next-click="getData"
            :current-page="currentPage"
            :page-sizes="[5,10,20,50,100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</template>

<script>
export default {
    name:'hjTable',
    data(){
        return {            
            // tableData:null,
            currentPage:1,
            pageSize:10,
            total:0,
            params:{},
            selectedData:[],//选择函数数据
            tableMaxHeight:0,//表格最大高度
            isEdit:false,//表格是否在编辑状态
            selectId:'',
            cur:''
        }
    },
    components:{
        tableSearch:() => import('./HJSearch.vue')
    },
    props:{
        tableData:{
            type:[],
            require:false,
            default:()=> []
        },
        apiURL:{
            type:Function,
            require:false
        },
        othersConfig:{
            type:Object,
            require:false,
            default:()=> []
        },  
        tableColumn:{
            type:Array,
            require:true
        },
        hasIndex:{
            type:Boolean,
            require:false,
            default:() => false
        },
        hasTableOpt:{
            type:Boolean,
            require:false,
            default:()=> false
        },
        // operators:{
        //     type:Object,
        //     require:false
        // },
        searchList:{
            type:Array,
            require:false,
            default:() => []
        },
        searchModel:{
            type:Object,
            require:false,
            default:() => {return {}}
        },
        searchOpeartors:{
            type:Array,
            require:false ,
            default:() => []
        },
        selectable:{
            type:String,
            require:false ,
            default:() => ''
        },
        // 是否需要分页
        hasPagination:{
            type:Boolean,
            require:false ,
            default:() => true
        },
        setupConfig:{
            type:Object,
            require:false,
            default:()=> []
        },
        editModel:{
            type:Array,
            require:false
        },
        editColumns:{//可编辑的列
            type:Array,
            require:false
        }
        // filters:{
        //     type:String,
        //     require:false
        // }
    },
    // inject:{
    //     searchModel:{}
    // }
    created(){
        this.cur = new Date().getTime();
    },
    filters:{
        
    },
    mounted(){
        this.getData();
        this.$nextTick(()=>{
            this.getTableMaxHeight();
        })
        window.addEventListener('resize',()=> {
            this.getTableMaxHeight();
        })      
    },
    watch:{
        pageSize:{
            handler:function(){
                this.getData();
            }
        },
        currentPage:{
            handler:function(){
                this.getData();
            }
        }
    },
    methods:{
        async getData(){
            if(this.apiURL){
                this.params = Object.assign({
                    'pageNum': this.currentPage,
                    'pageSize': this.pageSize,
                },this.searchModel);
                let fun = this.apiURL;
                let _this = this;
                await fun(this.params).then(res => {
                    _this.tableData = res.data.rows || res.data.data;
                    if(_this.hasPagination){
                        _this.total = res.data.total;
                    }
                })
            }            
        },
        handleSizeChange(val) {
            this.pageSize = val;
        },
        handleCurrentChange(val) {
            this.currentPage = val;
        },
        indexMethod(index){
            return index +=1             
        },
        doSearch(_params){
            this.getData(_params);
        },
        getTableMaxHeight(){
            debugger
            this.tableMaxHeight = this.$refs.tableWrapper.offsetHeight - 20 ;
        },
        changeSelect(selection){
            this.selectedData = selection;
        },
        clickRow(row){
            this.selectedData = row;
        },
        setupEvents(setupType,row){
            if(setupType === 'edit'){
                //先清空
                for (const key in this.editModel) {
                    this.editModel[key] = '';
                }
                this.selectId = row.id;
                this.isEdit = true;
                this.cur = new Date().getTime()+1000;
            }   
            this.$emit(setupType,row);
        }
    }
}
</script>
<style lang="less">
    .hj-table{
        height: 100%;
        display: flex;
        flex-direction: column;
        .table-opeartions{
            text-align: right;
            padding: 10px 80px;
            border-bottom: 1px solid rgba(255,255,255,.2);
            margin-bottom: 10px;
            .el-button--primary{
				color: rgba(255, 255, 255, 0.65);
				background: transparent;
				border-color: #023557;
			}
			.el-button--primary:hover{
				border-color: rgba(2, 154, 250, 1);;
				color: rgba(2, 154, 250, 1);
			}
			.el-checkbox__inner{
				background: transparent;
				width: 15px;
				height: 15px;
				border: 1px solid rgba(255, 255, 255, 0.5);
			}
        }
        .table-wrapper{
            flex:auto;
               // 表格公共样式
            .el-table, .el-table__expanded-cell{
                background-color: transparent;
            }
            .el-table{        
                height:100%;
                .el-table__body-wrapper{
                    position: absolute;
                    z-index: 4;
                }
                tr{
                    height: 56px;
                    background:transparent;
                    color: rgba(255, 255, 255, 0.65);
                    th{
                        color:#ffffff;
                    }
                }
                .el-table th.el-table__cell{
                    background-color: linear-gradient(0deg, rgba(11, 117, 216, 0.5) -55.32%, rgba(8, 136, 254, 0) 100%);
                }	
                th.el-table__cell{
                    background: rgba(11, 117, 216, 0.1);;
                }
                td.el-table__cell, th.el-table__cell.is-leaf{
                    border-bottom: 1px solid rgba(255, 255, 255, 0.1);;
                }
                .el-button--primary{
                    color: rgba(255, 255, 255, 0.65);
                    background: transparent;
                    border-color: #023557;
                }
                .el-button--primary:hover{
                    border-color: rgba(2, 154, 250, 1);;
                    color: rgba(2, 154, 250, 1);
                }
                .el-checkbox__inner{
                    background: transparent;
                    width: 15px;
                    height: 15px;
                    border: 1px solid rgba(255, 255, 255, 0.5);
                }
                .el-table__body{
                    .hover-row{
                        td{
                            background: linear-gradient(0deg, rgba(11, 117, 216, 0.5) -55.32%, rgba(8, 136, 254, 0) 100%) !important;
                            color: rgba(2, 154, 250, 1);
                        }
                    }
                }
                .el-table__body tr.current-row>td.el-table__cell{
                    background: linear-gradient(0deg, rgba(11, 117, 216, 0.5) -55.32%, rgba(8, 136, 254, 0) 100%) !important;
                    color: rgba(2, 154, 250, 1);
                }
            }    
            .el-table::before,.el-table__fixed::before{
                display: none;
            } 
        
            .el-table--enable-row-hover .el-table__body tr:hover > td {
                background: linear-gradient(0deg, rgba(11, 117, 216, 0.5) -55.32%, rgba(8, 136, 254, 0) 100%) !important;
                        color: rgba(2, 154, 250, 1);
            }
        }
       .el-pagination{
            // height: 65px;
        }    
        input{
            background: transparent;
            border: 1px solid rgba(255, 255, 255, .2);
            // color: rgba(255, 255, 255, 0.65);
            color:#FFFFFFA6;
        }   
    }
</style>